<template>
    <!-- 完整导航栏 -->
    <nav class="bg-white shadow-sm fixed w-full z-50">
        <div class="container mx-auto px-6 py-4 flex items-center justify-between">
            <div class="flex items-center space-x-8">
                <!-- 返回按钮 -->
                <el-icon 
                    class="text-gray-600 hover:text-blue-600 cursor-pointer mr-2" 
                    @click="goBack"
                    style="font-size: 20px;"
                >
                    <ArrowLeft />
                </el-icon>
                <div class="flex items-center gap-2"> 
                <img src="/src/assets/img/LOGO.png" alt="logo"
                    class="w-10 h-15 object-cover" />
                <span class="text-xl font-medium" @click="goHome">人才成长画像</span>
            </div>
                <div class="flex space-x-6 text-gray-1000 ml-4">
                    <a v-for="(nav, index) in navItems" 
                       :key="index"
                       href="#" 
                       class="hover:text-blue-600 transition-colors duration-200">
                       {{ nav }}
                    </a>
                </div>
            </div>
           
        </div>
    </nav>

    <!-- 完整课程主体 -->
    <main class="pt-12 bg-gray-50 min-h-screen">
        <div class="container mx-auto px-6 py-8 grid grid-cols-12 gap-8">
            <!-- 左侧目录 -->
            <div class="col-span-3 bg-white p-6 rounded-lg shadow-sm">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold">课程目录</h3>
                </div>
                <el-collapse v-model="activeChapter">
                    <el-collapse-item 
                        v-for="(chapter, index) in chapters"
                        :key="index"
                        :title="`第${index + 1}章 ${chapter.title}`"
                        :name="index"
                    >
                        <div v-for="(lesson, lIndex) in chapter.lessons" 
                             :key="lIndex"
                             class="py-2 px-4 hover:bg-blue-50 rounded cursor-pointer flex items-center"
                             :class="{ 'bg-blue-50': lesson.active }"
                             @click="selectLesson(chapter, lesson)">
                             <el-icon class="mr-2 text-blue-400"><VideoPlay /></el-icon>
                             <span class="flex-1">{{ lesson.title }}</span>
                             <span v-if="lesson.duration" class="text-gray-400 text-sm">{{ lesson.duration }}</span>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>

            <!-- 中间内容 -->
            <div class="col-span-6">
                <div class="bg-white p-6 rounded-lg shadow-sm mb-6">
                    <div class="flex justify-between items-start">
                        <div>
                            <h1 class="text-3xl font-bold mb-4">人工智能与机器学习实战课程</h1>
                            <div class="flex items-center space-x-6 text-gray-500 mb-6">
                                <span class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm">高级</span>
                                <span class="text-sm">时长：36小时</span>
                                <span class="text-sm">学员：12,458人</span>
                            </div>
                        </div>
                        <el-button type="primary" class="!h-12 !px-8" @click="startLearning">
                            <el-icon class="mr-2"><VideoPlay /></el-icon>
                            开始学习
                        </el-button>
                    </div>
                    
                    <div class="aspect-video rounded-xl overflow-hidden mb-6 shadow-lg">
                        <img src="/src/assets/img/kc.png" 
                             class="w-full h-full object-cover"
                             alt="课程封面">
                    </div>
                    
                    <div class="px-2">
                        <el-progress :percentage="65" class="mb-4" :stroke-width="16"/>
                        <div class="flex justify-between items-center text-gray-500 text-sm">
                            <span>已完成65%</span>
                            <span>预计还需12.5小时</span>
                        </div>
                    </div>
                </div>

                <el-tabs v-model="activeTab" class="mb-6">
                    <el-tab-pane label="课程详情" name="detail">
                        <div class="bg-white p-6 rounded-lg shadow-sm space-y-6">
                            <div>
                                <h3 class="text-xl font-semibold mb-4">课程简介</h3>
                                <p class="text-gray-600 leading-relaxed">
                                    本课程将带领学员深入探索人工智能与机器学习的前沿技术，从理论基础到实践应用，
                                    全方位掌握AI领域的核心知识。课程内容包括深度学习、神经网络、计算机视觉、
                                    自然语言处理等热门主题，并结合实际案例进行讲解。通过本课程的学习，学员将能够
                                    独立开发AI应用，解决实际问题。
                                </p>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold mb-4">适合人群</h3>
                                <ul class="grid grid-cols-2 gap-4 text-gray-600">
                                    <li v-for="(group, index) in targetGroups" 
                                        :key="index"
                                        class="flex items-center p-3 bg-gray-50 rounded">
                                        <el-icon class="mr-2 text-blue-400">
                                            <component :is="group.icon" />
                                        </el-icon>
                                        {{ group.text }}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </el-tab-pane>
                    
                    <el-tab-pane label="学习资源" name="resources">
                        <div class="bg-white p-6 rounded-lg shadow-sm space-y-4">
                            <div v-for="(res, index) in resources" 
                                 :key="index"
                                 class="flex items-center p-4 border rounded hover:bg-blue-50 group transition-colors">
                                <el-icon class="mr-3 text-gray-500 transition-colors group-hover:text-blue-500">
                                    <component :is="res.icon" />
                                </el-icon>
                                <span class="flex-1">{{ res.name }}</span>
                                <el-button 
                                    type="primary" 
                                    text 
                                    class="opacity-0 group-hover:opacity-100 transition-opacity"
                                    @click="downloadResource(res)">
                                    下载
                                </el-button>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>

            <!-- 右侧边栏 -->
            <div class="col-span-3 space-y-6">
                <div class="bg-white p-6 rounded-lg shadow-sm">
                    <h3 class="text-lg font-semibold mb-4">授课讲师</h3>
                    <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded">
                        <el-avatar :size="64" :src="avatarUrl" />
                        <div>
                            <div class="font-medium text-lg">张教授</div>
                            <div class="text-sm text-gray-500">清华大学计算机科学与技术系教授</div>
                            <div class="mt-2 text-blue-500 text-sm flex items-center">
                                <el-icon class="mr-1"><Star /></el-icon>
                                主讲课程：12门
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white p-6 rounded-lg shadow-sm">
                    <h3 class="text-lg font-semibold mb-4">相关课程</h3>
                    <div class="space-y-4">
                        <div v-for="course in relatedCourses" 
                             :key="course.id"
                             class="p-4 border rounded hover:shadow-md transition-shadow cursor-pointer"
                             @click="viewCourse(course.id)">
                             <div class="flex items-start">
                                 <img :src="course.cover" 
                                      class="w-20 h-16 rounded-lg object-cover mr-4"
                                      alt="课程封面">
                                 <div class="flex-1">
                                     <div class="font-medium mb-1">{{ course.title }}</div>
                                     <div class="text-sm text-gray-500 flex items-center">
                                         <el-icon class="mr-1"><User /></el-icon>
                                         {{ course.lecturer }}・{{ course.students }}人学习
                                     </div>
                                     <div class="mt-2 flex items-center text-sm">
                                         <span class="px-2 py-1 bg-gray-100 rounded mr-2">{{ course.level }}</span>
                                         <span class="text-gray-400">{{ course.duration }}</span>
                                     </div>
                                 </div>
                             </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { 
    ArrowLeft,
    VideoPlay, 
    Star, 
    User, 
    Document,
    Opportunity, 
    MagicStick, 
    Histogram 
} from '@element-plus/icons-vue'

const router = useRouter()



const avatarUrl = ref('https://ai-public.mastergo.com/ai/img_res/be573e20ee0a521726acda784d56371c.jpg')

// 课程数据
const activeChapter = ref(0)
const activeTab = ref('detail')

const chapters = ref([
  {
    title: '课程介绍',
    lessons: [
      { title: '课程概述与学习目标', duration: '45分钟' },
      { title: '环境配置与工具准备', duration: '1小时15分钟', active: true }
    ]
  },
  {
    title: '基础知识',
    lessons: [
      { title: '机器学习基础概念', duration: '2小时' },
      { title: 'Python数据分析基础', duration: '1小时45分钟' }
    ]
  },
  {
    title: '数据预处理',
    lessons: [
      { title: '数据清洗方法', duration: '2小时30分钟' },
      { title: '缺失值处理技术' }
    ]
  },
  {
    title: '特征工程',
    lessons: [
      { title: '特征选择方法' },
      { title: '降维技术实践' }
    ]
  }
])

const resources = ref([
  { name: '课程课件.pdf', icon: Document },
  { name: '实验指导手册.docx', icon: MagicStick },
  { name: '参考资料.zip', icon: Histogram }
])

const targetGroups = ref([
  { text: '具备Python编程基础的开发者', icon: Opportunity },
  { text: '对人工智能领域感兴趣的学习者', icon: Star },
  { text: '需要了解AI技术发展的在校学生', icon: Histogram },
  { text: '需要了解AI技术的产品经理', icon: User }
])

const relatedCourses = ref([
  {
    id: 1,
    title: '数据科学与分析实战',
    cover: '/src/assets/img/kc1.png',
    lecturer: '李教授',
    students: '3,245',
    level: '中级',
    duration: '24小时'
  },
  {
    id: 2,
    title: '深度学习基础与应用',
    cover: '/src/assets/img/kc3.png',
    lecturer: '王教授',
    students: '2,890',
    level: '高级',
    duration: '48小时'
  },
  {
    id: 3,
    title: '计算机视觉入门',
    cover: '/src/assets/img/kc.png',
    lecturer: '陈教授',
    students: '1,678',
    level: '初级',
    duration: '18小时'
  }
])

// 方法
const goBack = () => {
    window.history.length > 1 ? router.go(-1) : router.push('/')
}

const selectLesson = (chapter, lesson) => {
    chapters.value.forEach(c => {
        c.lessons.forEach(l => l.active = false)
    })
    lesson.active = true
}

const startLearning = () => {
    router.push({ name: 'course-player' })
}

const downloadResource = (resource) => {
    console.log('下载资源:', resource.name)
}

const viewCourse = (courseId) => {
    router.push({ name: 'course-detail', params: { id: courseId } })
}
</script>

